<template>
    <div class="register login">
        <div class="registers">
            <div class="registerMain">
                <div class="registerPhone" v-if="phoneShow">
                    <img :src="logo" alt="">
                    <van-row class="title" type="flex" justify="space-between">
                        <van-col><h3>{{$t('common.phone_register')}}</h3></van-col>
                        <van-col @click.native="go_login">{{$t('common.to_login')}}</van-col>
                    </van-row>
                    <van-cell-group>
                        <van-field v-model="user.phone" maxlength="11" :placeholder="$t('common.phone_remind')">
                            <van-button slot="button" size="small" type="info" @click="chooseCountry">{{user.country}}<van-icon name="arrow-down" /></van-button>
                        </van-field>
                        <van-field v-model="user.code" maxlength="6" :placeholder="$t('mobil_regsiter.code_remind')">
                            <van-button slot="button" size="small" type="info" :disabled="disBtn" @click="sendCode" @click.stop="">{{sec}}</van-button>
                        </van-field>
                        <van-field v-model="user.pwd" type="password" :placeholder="$t('common.password_remind')">
                        </van-field>
                        <van-field v-model="user.payCode" maxlength="6" type="number" :placeholder="$t('info.pay')">
                        </van-field>
                        <van-field v-model="user.invite" :placeholder="$t('common.invite_remind')">
                            <van-button slot="button" size="small" type="info" >{{$t('common.input_remind')}}</van-button>
                        </van-field>
                    </van-cell-group>
                    <div class="btns">
                        <button class="btn" @click="user_register">{{$t('common.register_button')}}</button>
                        <button class="btn" @click="changeTitle">{{$t('common.email_register')}}</button>
                    </div>
                    <van-checkbox v-model="checked">{{$t('common.agree')}}</van-checkbox>
                </div>
                <div class="registerPhone" v-else>
                    <img :src="logo" alt="">
                    <van-row class="title" type="flex" justify="space-between">
                        <van-col><h3>{{$t('common.email_register')}}</h3></van-col>
                        <van-col @click.native="go_login">{{$t('common.to_login')}}</van-col>
                    </van-row>
                    <van-cell-group>
                        <van-field v-model="user.mail" :placeholder="$t('common.email_remind')">
                        </van-field>
                        <van-field v-model="user.code" maxlength="6" :placeholder="$t('email_regsiter.code_remind')">
                            <van-button slot="button" size="small" type="info" :disabled="disMailBtn" @click="sendMailCode">{{mailSec}}</van-button>
                        </van-field>
                        <van-field v-model="user.pwd" type="password" :placeholder="$t('common.password_remind')">
                        </van-field>
                        <van-field v-model="user.payCode" maxlength="6" type="number" :placeholder="$t('info.pay')">
                        </van-field>
                        <van-field v-model="user.invite" :placeholder="$t('common.invite_remind')">
                            <van-button slot="button" size="small" type="info" >{{$t('common.input_remind')}}</van-button>
                        </van-field>
                    </van-cell-group>
                    <div class="btns">
                        <button class="btn" @click="user_mail_register">{{$t('common.register_button')}}</button>
                        <button class="btn" @click="changeTitle">{{$t('common.phone_register')}}</button>
                    </div>
                    <van-checkbox v-model="checked">{{$t('common.agree')}}</van-checkbox>
                </div>
            </div>
        </div>
        <van-popup v-model="typeShow" position="bottom" :overlay="true">
            <van-picker show-toolbar title="选择地区" :columns="town" @cancel="onCancel" @confirm="onConfirm"/>
        </van-popup>
        <loading v-if="loadingShow"></loading>
    </div>
</template>

<script>
    import { getCode } from "../country/country";
    export default {
        data() {
            return {
                user:{
                    phone:'',
                    mail:'',
                    code:'',
                    pwd:'',
                    invite:'',
                    country:'+86',
                    payCode:''
                },
                checked:false,
                phoneShow:true,
                country:[],
                typeShow:false,
                disBtn:false,
                sec:this.$t('common.get_code'),
                timer:null,
                disMailBtn:false,
                mailSec:this.$t('common.get_code'),
                mailTimer:null,
                loadingShow:false,
                logo:require('../assets/AATlogo.png')
            }
        },
        methods: {
            sendCode(){
                if(!this.user.phone){
                    this.$toast(this.$t('common.phone_remind'))
                    return
                }
                const TIME_COUNT = 60;
                let param = {
                    type:1,
                    countrycode:this.user.country.split('+')[1],
                    phone:this.user.phone
                }
                this.loadingShow = true
                this.$api.post('user/sendCode',param,this)
                    .then(res =>{
                        this.loadingShow = false
                        this.disBtn = true
                        this.$toast(res.message)
                        if(!this.timer){
                            this.sec = TIME_COUNT
                            this.timer = setInterval(()=>{
                                if(this.sec>0 && this.sec<= TIME_COUNT){
                                    this.sec--
                                }else{
                                    this.sec = this.$t('common.get_code')
                                    clearInterval(this.timer)
                                    this.timer = null
                                    this.disBtn = false
                                }
                            },1000)
                        }
                    })
            },
            sendMailCode(){
                if(!this.user.mail){
                    this.$toast(this.$t('common.email_remind'))
                    return
                }
                const TIME_COUNT = 60;
                let param = {
                    email:this.user.mail,
                    type:1
                }
                this.loadingShow = true
                this.$api.post('user/sendMail',param,this)
                    .then(res =>{
                        this.loadingShow = false
                        this.disMailBtn = true
                        this.$toast(res.message)
                        if(!this.mailTimer){
                            this.mailSec = TIME_COUNT
                            this.mailTimer = setInterval(()=>{
                                if(this.mailSec>0 && this.mailSec<= TIME_COUNT){
                                    this.mailSec--
                                }else{
                                    this.mailSec = this.$t('common.get_code')
                                    clearInterval(this.mailTimer)
                                    this.mailTimer = null
                                    this.disMailBtn = false
                                }
                            },1000)
                        }
                    })
            },
            changeTitle(){
                this.phoneShow = !this.phoneShow
                Object.keys(this.user).map(key => this.user[key] = '');
                this.user.country = '+86'
                this.getCode()
            },
            chooseCountry(){
                this.typeShow = true
            },
            user_register(){
                if(!this.user.phone){
                    this.$toast(this.$t('common.phone_remind'))
                    return
                }
                if(!this.user.code){
                    this.$toast(this.$t('mobil_regsiter.code_remind'))
                    return
                }
                if(!this.user.pwd){
                    this.$toast(this.$t('common.password_remind'))
                    return
                }
                if(!this.user.payCode){
                    this.$toast(this.$t('info.pay'))
                    return
                }
                if(!this.user.invite){
                    this.$toast(this.$t('common.invite_remind'))
                    return
                }
                if(!this.checked){
                    this.$toast(this.$t('info.register'))
                    return
                }
                let param = {
                    type:1,
                    phone:this.user.phone,
                    countrycode:this.user.country.split('+')[1],
                    code:this.user.code,
                    password:this.user.pwd,
                    paypassword:this.user.payCode,
                    invite_code:this.user.invite
                }
                this.loadingShow = true
                this.$api.post('user/reg',param,this)
                    .then(res =>{
                        this.loadingShow = false
                        this.$toast(res.message)
                        Object.keys(this.user).map(key => this.user[key] = '');
                        this.user.country = '+86'
                        this.checked = false
                        this.$router.push('/login')
                    })
            },
            user_mail_register(){
                if(!this.user.mail){
                    this.$toast(this.$t('common.email_remind'))
                    return
                }
                if(!this.user.code){
                    this.$toast(this.$t('email_regsiter.code_remind'))
                    return
                }
                if(!this.user.pwd){
                    this.$toast(this.$t('common.password_remind'))
                    return
                }
                if(!this.user.payCode){
                    this.$toast(this.$t('info.pay'))
                    return
                }
                if(!this.user.invite){
                    this.$toast(this.$t('common.invite_remind'))
                    return
                }
                if(!this.checked){
                    this.$toast(this.$t('info.register'))
                    return
                }
                let param = {
                    type:2,
                    email:this.user.mail,
                    code:this.user.code,
                    password:this.user.pwd,
                    paypassword:this.user.payCode,
                    invite_code:this.user.invite
                }
                this.loadingShow = true
                this.$api.post('user/ereg',param,this)
                    .then(res =>{
                        this.loadingShow = false
                        this.$toast(res.message)
                        Object.keys(this.user).map(key => this.user[key] = '');
                        this.user.country = '+86'
                        this.checked =  false
                        this.$router.push('/login')
                    })
            },
            go_login(){
                this.$router.push('/login')
            },
            getCountry(){
                this.country = getCode()
            },
            getCode(){
                if(window.location.hash.indexOf('inviteCode')!= -1){
                    let arr = window.location.hash.split('?')[1]
                    this.user.invite = arr.split('=')[1]
                }
            },
            onCancel(){
                this.typeShow = false
            },
            onConfirm(data){
                let arr = data.trim().split('/')
                this.user.country = arr[0]
                this.typeShow = false
            }
        },
        created() {
            this.getCountry()
            this.getCode()
            console.log([
                "                   _ooOoo_",
                "                  o8888888o",
                "                  88\" . \"88",
                "                  (| -_- |)",
                "                  O\\  =  /O",
                "               ____/`---'\\____",
                "             .'  \\\\|     |//  `.",
                "            /  \\\\|||  :  |||//  \\",
                "           /  _||||| -:- |||||-  \\",
                "           |   | \\\\\\  -  /// |   |",
                "           | \\_|  ''\\---/''  |   |",
                "           \\  .-\\__  `-`  ___/-. /",
                "         ___`. .'  /--.--\\  `. . __",
                "      .\"\" '<  `.___\\_<|>_/___.'  >'\"\".",
                "     | | :  `- \\`.;`\\ _ /`;.`/ - ` : | |",
                "     \\  \\ `-.   \\_ __\\ /__ _/   .-` /  /",
                "======`-.____`-.___\\_____/___.-`____.-'======",
                "                   `=---='",
                "^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^",
                "         佛祖保佑       永无BUG"
            ].join('\n'));
        },
        mounted() {

        },
        computed:{
            town(){
                let arr = this.country
                let area = this.$i18n.locale
                let counArr = []
                if(area === 'zh'){
                    arr.map(i =>{
                        counArr.push(`+${i.code}/ ${i.zh}`)
                    })
                }else{
                    arr.map(i =>{
                        counArr.push(`+${i.code}/ ${i.en}`)
                    })
                }
                return counArr
            }
        }
    }
</script>

<style lang="stylus" scoped>
    font = #f6543e
    [class*=van-hairline]::after
        border none
    .van-cell:not(:last-child)::after
        border-bottom none
    .van-popup
        background: #fff
        .van-nav-bar
            background: #fff !important;
        .van-picker
            background: #fff !important;
            color: #160d01;
    .register
        width 100%
        height 100%
    .registers
        position absolute
        top 50%
        width 100%
        transform translateY(-50%)
    .registerMain
        width 84%
        margin 0 auto
        color font
        position relative
        padding-bottom 40px
        img
            width 240px
            margin 0 auto
            display block
            margin-top 40px
        .title
            margin-top 0px
            align-items baseline
            h3
                font-size 22px
                font-weight 500
                color white
                display inline-block
        .van-cell-group
            margin-top 20px
            .van-cell
                border-bottom 1px solid #ccc
                background none !important 
                .van-button--info
                    background none
                    border none
                    color font
                    font-size 14px
                    .van-icon
                        margin-left 5px
                        top 1px

        .btns
            margin-top 20px
            display flex
            display -webkit-flex
            justify-content space-between
            .btn
                &:first-child
                    width 65%
                &:last-child
                    width 33%
                    background:  linear-gradient(180deg, #ff7541, #f6543e);
                    color #fff
        .van-checkbox
            margin-top 20px
        .go_register
            color #000
            margin-top 80px
</style>